<template>
  <div class="picture-list">
    <!--图片列表-->
    <a-list :grid="grid" :data-source="dataList" :loading="loading">
      <template #renderItem="{ item: file }">
        <a-list-item style="padding: 0">
          <!--          单张图片-->
          <a-card hoverable @click="doClickFile(file)" style="width: 200px; border-color: #ffffff">
            <template #cover>
              <img
                :alt="file.name"
                :src="'/src/assets/' + (file.fileFormat ?? 'csv') + '_icon.svg'"
                style="width: 80px; object-fit: cover; margin: 0 auto; margin-top: 30px"
                loading="lazy"
              />
            </template>
            <a-card-meta :title="file.name">
              <template #description>
                <a-flex v-if="showTag">
                  <a-tag color="green">
                    {{ file.category ?? '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in file.tags.slice(0, 2)" :key="tag">
                    {{ tag }}
                  </a-tag>
                </a-flex>
                <div v-if="showStatus">
                  创建状态：
                  <a-tag :color="FILE_CREATE_STATUS_COLOR_ENUM[file.fillStatus]">{{
                    file.fillStatus
                  }}</a-tag>
                </div>
              </template>
            </a-card-meta>
            <template v-if="showOp" #actions>
              <ShareAltOutlined @click="(e) => doShare(file, e)" />
              <EditOutlined v-if="canEdit" @click="(e) => doEdit(file, e)" />
              <a-popconfirm
                v-if="canDelete"
                title="确定删除嘛？"
                @click="(e) => stopBomb(e)"
                @confirm="(e) => doDelete(file, e)"
              >
                <DeleteOutlined />
              </a-popconfirm>
              <!--              <DeleteOutlined v-if="canDelete" @click="(e) => doDelete(file, e)" />-->
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
    <ShareModal ref="shareModalRef" :link="shareLink" />
  </div>
</template>

<script setup lang="ts">
import { DeleteOutlined, EditOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { ref } from 'vue'
import { deleteFileUsingPost } from '@/api/fileController.ts'
import ShareModal from '@/components/ShareModal.vue'
import { FILE_CREATE_STATUS_COLOR_ENUM } from '@/constant/file.ts'

interface Props {
  dataList?: API.FileVO[]
  loading?: boolean
  showOp?: boolean
  onReload?: () => void
  canEdit?: boolean
  canDelete?: boolean
  grid?: {}
  showTag?: boolean
  showStatus?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showOp: false,
  canEdit: false,
  canDelete: false,
  showTag: true,
  showStatus: false,
})

// 定义数据

const router = useRouter()

//跳转到图片详情页
const doClickFile = (file: API.FileVO) => {
  router.push({
    path: `/file/${file.id}`,
  })
}

// 停止冒泡
const stopBomb = (e) => {
  e.stopPropagation()
}

// 删除数据
const doDelete = async (picture, e) => {
  // 阻止冒泡
  e.stopPropagation()
  const id = picture.id
  if (!id) {
    return
  }
  const res = await deleteFileUsingPost({ id })
  if (res.data.code === 0) {
    message.success('删除成功')
    props.onReload()?.()
  } else {
    message.error('删除失败')
  }
}

const doEdit = (file, e) => {
  // 阻止冒泡
  e.stopPropagation()
  router.push({
    path: '/add_file',
    query: {
      id: file.id,
    },
  })
}

//------- 分享操作 ----------
const shareModalRef = ref()
// 分享链接
const shareLink = ref<string>()

// 分享函数
const doShare = (file, e) => {
  // 阻止冒泡
  e.stopPropagation()
  shareLink.value = `${window.location.protocol}//${window.location.host}/file/${file.id}`
  if (shareModalRef.value) {
    shareModalRef.value.openModal()
  }
}
</script>

<style scoped>
:deep(.ant-card-meta-title) {
  text-align: center;
}
</style>
